<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <el-form-item label="事件时间:" prop="startAndend">
            <el-date-picker
              v-model="startAndend"
              type="datetimerange"
              size="small"
              start-placeholder="开始日期时间"
              end-placeholder="结束日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用能单位:" prop="sysDeptIdChose">
            <CascaderSelect
              v-model="sysDeptIdChose"
              :values="sysDeptIdChose"
              :varient="'energy'"
              placeholder="请选择用能单位"
              :filterable="true"
              @input="handlerLiandong"
            ></CascaderSelect>
          </el-form-item>
          <el-form-item label="能耗终端:" prop="monitoringNetworkId">
            <RemoteSelect
              v-model="queryParams.monitoringNetworkId"
              varient="networks"
              :extraParams="extraParams"
              placeholder="请选择能耗终端"
              size="small"
              @input="choseNetwork"
            ></RemoteSelect>
          </el-form-item>
          <el-form-item label="预警状态:" prop="alarmType">
            <DictionariesSelect
              :showType="0"
              :valueType="0"
              v-model="queryParams.alarmType"
              :datas="queryParams.alarmType"
              :modelBinding="'alarmType'"
              :selectArr="dict.type.device_alarm_type"
              @handleSelect="handleSelect"
              placeholder="请选择预警状态"
              :clearable="true"
              :filterable="true"
            >
            </DictionariesSelect>
          </el-form-item>
          <el-form-item label="信息包类型:" prop="plugPackageType">
            <DictionariesSelect
              :showType="0"
              :valueType="0"
              v-model="queryParams.plugPackageType"
              :datas="queryParams.plugPackageType"
              :modelBinding="'plugPackageType'"
              :selectArr="dict.type.plug_package_type"
              @handleSelect="handleSelect"
              placeholder="请选择信息包类型"
              :clearable="true"
              :filterable="true"
            >
            </DictionariesSelect>
          </el-form-item>
          <!-- <el-form-item prop="">
                <DictionariesSelect
                  :showType="0"
                  :valueType="0"
                  :datas="queryParams.deviceMdel"
                  :modelBinding="'deviceMdel'"
                  :selectArr="dict.type.device_model"
                  @handleSelect="handleSelect"
                  placeholder="设备型号"
                >
                </DictionariesSelect>
              </el-form-item> -->

          <el-form-item label="物联网卡号:" prop="cardNum">
            <el-input
              placeholder="请输入物联网卡号"
              v-model="queryParams.cardNum"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备编码:" prop="deviceCode">
            <el-input
              placeholder="请输入设备编码"
              v-model="queryParams.deviceCode"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              v-hasPermi="['device:data:list']"
              @click="handlerQuery"
            >
              搜索
            </el-button>
            <el-button
              icon="el-icon-refresh"
              size="small"
              v-hasPermi="['device:data:list']"
              @click="handlerResetQuery"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import RemoteSelect from "@/components/Select/RemoteSelect";
import DictionariesSelect from "@/components/DictionariesSelect/index.vue";
import CascaderSelect from "@/components/Select/CascaderSelect";
export default {
  components: {
    RemoteSelect,
    DictionariesSelect,
    CascaderSelect,
  },
  dicts: [
    "device_alarm_type", //预警状态
    // "device_model", // 电表型号
    "plug_package_type", // 信息包类型
  ],
  data() {
    return {
      startAndend: [],
      extraParams: {}, // 联动用能单位查询
      queryParams: {
        sysDeptId: null, // 用能单位
        monitoringNetworkId: null, // 能耗终端
        alarmType: "", // 预警状态
        plugPackageType: "", // 信息包类型
        // deviceMdel: '', // 电表型号
        cardNum: null, // 物联网卡号
        deviceCode: null, // 设备编号
      },
      sysDeptIdChose: null,
    };
  },
  created() {},
  mounted() {},
  methods: {
    /* 选择能耗终端 */
    choseNetwork(value) {
      this.queryParams.monitoringNetworkId = value;
    },
    handleSelect(val, binding, flag) {
      // console.log(val, binding, flag);
      this.queryParams[binding] = val;
    },
    handlerQuery() {
      if (this.startAndend && this.startAndend.length > 0) {
        this.queryParams.startTime = this.startAndend[0];
        this.queryParams.endTime = this.startAndend[1];
      } else {
        this.queryParams.startTime = null;
        this.queryParams.endTime = null;
      }
      if (this.sysDeptIdChose) {
        this.queryParams.sysDeptId = this.sysDeptIdChose;
      } else {
        this.queryParams.sysDeptId = null;
      }
      this.$emit("handlerQuery", { ...this.queryParams });
    },
    handlerResetQuery() {
      this.startAndend = [];
      this.queryParams = {
        sysDeptId: null, // 用能单位
        monitoringNetworkId: null, // 能耗终端
        alarmType: "", // 预警状态
        plugPackageType: "", // 信息包类型
        // deviceMdel: '', // 电表型号
        cardNum: null, // 物联网卡号
        deviceCode: null, // 设备编号
      };
      this.extraParams = {};
      this.sysDeptIdChose = null;
      this.handlerQuery();
    },
    // 联动
    handlerLiandong(value) {
      let result;
      if (value && value.length > 0) {
        result = value[value.length - 1];
      } else {
        result = null;
      }
      this.queryParams.monitoringNetworkId = null;
      this.sysDeptIdChose = result;
      // 请求能耗终端
      this.extraParams = {
        sysDeptId: this.sysDeptIdChose,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .noPd {
  .title-container {
    padding-bottom: 0px !important;
  }
}
</style>
